<template>
  <view>
    <view class="uni-margin-wrap">
      <swiper
        class="swiper"
        circular
        :indicator-dots="indicatorDots"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
      >
        <swiper-item>
          <view class="swiper-item uni-bg-red">A</view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item uni-bg-green">B</view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item uni-bg-blue">C</view>
        </swiper-item>
      </swiper>
    </view>

    <view class="swiper-list">
      <view class="uni-list-cell uni-list-cell-pd">
        <view class="uni-list-cell-db">指示点</view>
        <switch :checked="indicatorDots" @change="changeIndicatorDots" />
      </view>
      <view class="uni-list-cell uni-list-cell-pd">
        <view class="uni-list-cell-db">自动播放</view>
        <switch :checked="autoplay" @change="changeAutoplay" />
      </view>
    </view>

    <view class="uni-padding-wrap">
      <view class="uni-common-mt">
        <text>幻灯片切换时长(ms)</text>
        <text class="info">{{ duration }}</text>
      </view>
      <slider @change="durationChange" :value="duration" min="500" max="2000" />
      <view class="uni-common-mt">
        <text>自动播放间隔时长(ms)</text>
        <text class="info">{{ interval }}</text>
      </view>
      <slider
        @change="intervalChange"
        :value="interval"
        min="2000"
        max="10000"
      />
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        background: ["color1", "color2", "color3"],
        indicatorDots: true,
        autoplay: true,
        interval: 2000,
        duration: 500,
      };
    },
    methods: {
      changeIndicatorDots(e) {
        this.indicatorDots = !this.indicatorDots;
      },
      changeAutoplay(e) {
        this.autoplay = !this.autoplay;
      },
      durationChange(e) {
        console.log(e);
        this.duration = e.detail.value;
      },
      intervalChange(e) {
        this.interval = e.detail.value;
      },
    },
  };
</script>

<style>
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}
	.swiper {
		height: 300rpx;
	}
	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}
	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}
	.info {
		position: absolute;
		right: 20rpx;
	}
	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}
</style>

